import React, { FC, useState, useEffect } from 'react'
import styles from '../common.module.scss'
import { useSearchParams } from 'react-router-dom'
import QuestionCard from '../../../components/QuestionCard'
import { useDebounceFn } from 'ahooks'
import ListSearch from '../../../components/ListSearch'
import { Typography, Spin } from 'antd'
const List: FC = () => {
    const { Title } = Typography
    const [searchParams] = useSearchParams()
    // 获取接口数据  此处为公共逻辑 抽离为hooks
    const [loading, setLoading] = useState(false)
    // 防抖hooks 加载更多
    const { run: tryLoadMore } = useDebounceFn(() => {
        console.log('loadMore')
    }, {
        wait: 1000
    })
    // 界面初始化时 和url参数变化时都要执行tryLoadMore
    useEffect(() => {
        tryLoadMore()
    }, [searchParams])
    // 界面滚动时 尝试触发加载
    useEffect(() => {
        window.addEventListener('scroll', tryLoadMore)
        return () => {
            window.removeEventListener('scroll', tryLoadMore)
        }
    }, [searchParams])
    return (
        <>
            {/* header部分 */}
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>我的问卷aa </Title>
                </div>
                <div className={styles.right}>
                    <ListSearch />
                </div>
            </div>
            {/* 列表部分 */}
            {/* <div className={styles.container}>
                {loading && <div style={{ textAlign: 'center' }}>
                    <Spin />
                </div>}
                {(!loading && list.length > 0) && list.map((item: any) => {
                    const { _id } = item
                    return <QuestionCard key={_id} {...item} />
                })}
            </div> */}
            {/* 尾部 上拉分页*/}
            <div className={styles.footer}>
                loadMore
            </div>
        </>
    )
}

export default List